<template>
    <div class="photo-container">
    <h3>{{photoinfo.title}}</h3>
    <p class="subtitle">
        <span>发表时间:{{photoinfo.add_time |dataFormat}}</span>
        <span>点击:{{photoinfo.click}}次</span>
    </p>

    <hr>

    <div class="thumbs">
    <vue-preview :slides="list" @close="handleClose"></vue-preview>    
    </div>

    <div class="content">{{photoinfo.content}}</div>
    <cmt-box :id=id></cmt-box>
</div>
</template>

<script>
import comment from '../subcomponents/comment.vue'
import{Toast} from 'mint-ui'



export default {
    data(){
         return{
             id:this.$route.params.id, 
             photoinfo:{},
             list:[],
         }
    },
    created(){
         this.getPhotoInfo();
         this.grtThumbs();
    },
    methods:{
         getPhotoInfo(){
             this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/'+this.id).then(result=>{
                 if(result.body.status === 0){
                     this.photoinfo=result.body.message[0];
                    //  Toast('获取数据成功');
                    //  console.log(this.id)
                 }
             })
         },
         grtThumbs(){
             this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id).then(result=>{
                 if(result.body.status  === 0){
                     result.body.message.forEach(item => {
                         //forearch循环每个图片，给每个图片加上好宽和高
                         item.w=600;
                         item.h=400;
                         item.msrc=item.src;
                         this.list = result.body.message;
                         Toast('成功')
                     });
                 }
             })
         },
         handleClose () {
        console.log('close event')
      },

    },
    components:{
        'cmt-box':comment
    }
}
</script>

<style >
.photo-container h3{
    font-size: 15px;
    color: #26A2FF;
    text-align:center;
    margin: 15px;
}
.subtitle{
    display:flex;
    justify-content: space-between;
}
.content{
    font-size: 13px;
    line-height: 30px
}
.thumbs img{
    width: 100px;
    height: 100px;
    margin: 10px;
    box-shadow: 0 0 8px;
}
 

</style>
